function GameInstructions() {
    return (
        <div className="mb-8 bg-blue-50 dark:bg-blue-900/30 p-4 rounded-xl" data-name="game-instructions">
            <h2 className="text-lg font-semibold mb-2 text-blue-800 dark:text-blue-300">How to Play:</h2>
            <div className="space-y-1.5">
                <InstructionItem text="Find the different colored square" />
                <InstructionItem text="3 attempts per level" />
                <InstructionItem text="Colors get more similar as you progress" />
                <InstructionItem text="Time limits appear at high levels" />
            </div>
        </div>
    );
}

function InstructionItem({ text }) {
    return (
        <div className="flex items-center gap-2 whitespace-nowrap overflow-hidden" data-name="instruction-item">
            <span className="w-1.5 h-1.5 bg-blue-500 rounded-full flex-shrink-0"></span>
            <span className="text-[13px] text-blue-900 dark:text-blue-200 truncate">{text}</span>
        </div>
    );
}
